<template>
	<view>

		<image src="../../static/images/user_bg.jpg" mode="aspectFill" style="width: 100%;height:250px;"
			class="my-container"></image>
		<view style="width: 100%;height:100px;">

		</view>



		<view class="radius margin" style="position: relative;top: -250px;" v-if="apiToken">
			<view class="flex" style="align-items: center;">
				<view class="margin-right">
					<image :src="userInfo.avatarUrl" mode="" style="width: 120rpx;height: 120rpx;"
						class="cu-avatar lg round"></image>
				</view>
				<view class="">
					<view class=" text-xxl text-bold">{{userInfo.nickName}}</view>
					<view style="margin-top: 6rpx;">{{userInfo.birthday}}</view>
				</view>
			</view>
		</view>

		<view class="radius margin" style="position: relative;top: -250px;" v-else>
			<view class="flex" style="align-items: center;">
				<view class="margin-right">
					<image src="../../static/images/logo.png" mode=""
						style="width: 120rpx;height: 120rpx;border-radius: 50%;"></image>
				</view>

				<uv-button type="primary" style="width: fit-content !important;" shape="square" size="mini"
					:customStyle="customStyle" @click="goLogin">登 录</uv-button>

			</view>
		</view>

		<!-- <view class="flex justify-around  bg-white margin padding radius" style="position: relative;top: -220px;">
			<view class="flex flex-direction text-center">
				<text>0</text>
				<text>点赞</text>
			</view>
			<view class="flex flex-direction text-center">
				<text>0</text>
				<text>收藏</text>
			</view>
			<view class="flex flex-direction text-center">
				<text>0</text>
				<text>收藏</text>
			</view>
		</view>
		</view> -->


		<view class="cu-list menu sm-border card-menu shadow-lg" style="position: relative;top: -180px;">


			<view class="cu-item arrow" @tap="noticeList">
				<view class="content">
					<text class="cuIcon-noticefill text-yellow"></text>
					<text class="">我的报名</text>
				</view>
			</view>
		</view>

		<!-- 菜单 -->
		<view class="cu-list menu sm-border card-menu shadow-lg" style="position: relative;top: -180px;">



			<!-- <view class="cu-item arrow" @tap="goAbout">
				<view class="content">
					<text class="cuIcon-creativefill text-orange"></text>
					<text class="">联系客服</text>
				</view>
			</view> -->


			<view class="cu-item arrow">
				<view class="content" style="display: flex;align-items: center;">
					<text class="cuIcon-weixin text-green"></text>
					<button class="wechats" open-type="contact" @contact="contact">联系客服</button>
				</view>
			</view>


			<view class="cu-item arrow" @tap="goAgreement">
				<view class="content">
					<text class="cuIcon-text text-blue"></text>
					<text class="">隐私政策</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="quit">
				<view class="content">
					<text class="cuIcon-exit text-gray"></text>
					<text class="">退出登录</text>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					weixin: 'li928375613'
				},
				apiToken: false,
				userInfo: {},
				customStyle: {
					height: '60rpx',
					background: '#3c9cff',
					color: '#fff',
					width: '260rpx',
					borderRadius: '30rpx', //圆角	
				}
			}
		},
		onShow() {
			try {
				const value = uni.getStorageSync('isLogin');
				if (value) {
					this.userInfo = uni.getStorageSync('userInfo')
					this.apiToken = true;
				} else {
					this.apiToken = false;
				}
				console.log(this.apiToken)
			} catch (e) {
				// error
			}
		},
		onLoad() {

		},
		methods: {
			// 获取用户信息
			getUserInfos() {
				uni.login({
					provider: 'weixin',
					success: res => {
						uniCloud.callFunction({
							name: 'user',
							data: {
								action: 'appid',
								js_code: res.code
							},
							success: Res => {
								uni.setStorageSync('openid', Res.result.openid)
								uniCloud.callFunction({
									name: 'user',
									data: {
										action: 'getUser',
										open_id: Res.result.openid
									},
									success: res => {
										if (res.result != null && res.result != '') {
											uni.setStorageSync('userInfo', res.result)
											this.userInfo = res.result
											this.apiToken = true;
											uni.setStorageSync('isLogin', true)
										} else {
											uni.setStorageSync('isLogin', false)
											this.apiToken = false
											this.toLog()
										}
									},
									fail: err => {
										console.log('err', err)
									}
								})
							}
						})
					}
				})
			},
			call() {
				const _this = this;
				uni.makePhoneCall({
					phoneNumber: _this.config.phone //仅为示例
				});
			},
			copyWeixin() {
				const _this = this;
				uni.setClipboardData({
					data: _this.config.weixin,
					success: function() {
						uni.showToast({
							title: '复制微信成功',
							duration: 2000
						});
					}
				});
			},
			// 我的报名	
			noticeList() {
				if (!this.apiToken) {
					uni.showToast({
						title: '请先登录！',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/user/my_com'
				})
			},
			goAbout() {

			},
			goAgreement() {
				uni.navigateTo({
					url: '/pages/user/privacy'
				})
			},
			async goLogin() {
				uni.showLoading({
					title: '请稍等',
					mask: true
				})
				await this.getUserInfos()
			},
			// 登录
			toLog() {
				uni.navigateTo({
					url: '/pages/user/login'
				})
				uni.hideLoading()
			},
			// 获取数据库账号
			getUserinfo() {
				uniCloud.callFunction({
					name: 'user',
					data: {
						action: 'getUser',
						open_id: this.openId
					},
					success: res => {
						console.log('xinxi', res)
						if (res.result != null) {
							this.isUser = true
						} else {
							this.isUser = false
						}
					}
				})

			},
			// 退出登录
			quit() {
				if (!this.apiToken) {
					uni.showToast({
						title: '请先注册！',
						icon: 'none'
					})
					return
				}
				uni.clearStorage()
				uni.showToast({
					title: '清理成功',
					icon: 'none'
				})
				this.apiToken = false
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FA;
	}

	.uv-button-wrapper {
		width: fit-content !important;
	}

	.wechats::after {
		border: none;
	}

	.wechats {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		font-size: 30rpx;
		text-align: center;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		text-align: left;
		background-color: #fff;
		padding-top: 6rpx;
		padding-left: 5rpx;
		width: 100%;
		height: 100%;
	}


	.customer-service {
		display: inline;
		font-size: 30rpx;
		padding: 0 6rpx;
		color: #3C91FB;
		background-color: #F2F2F2;
	}

	.my-container:before {
		content: ' ';
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		opacity: 1;
		background-image: linear-gradient(to top, rgba(247, 248, 250, 1), rgba(247, 248, 250, 0));
		background-repeat: no-repeat;
		background-position: 50% 0;
		background-size: cover;
	}
</style>